<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改大屏元素数据')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <form class="form-horizontal m" id="form-userModel-edit">

        <h3 class="form-header h3">大屏元素数据修改：</h3>




        <div class="form-group col-sm-12" th:each="d : ${dataVisualRules}">
            <input id="id"  name="id" readonly="true" class="form-control" type="hidden" th:value="${d.id}" required>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">key值：</label>
                        <div class="col-sm-2"><!--th:field="*{apiUrl}"-->
                            <input th:value="${d.keyCode}" readonly="readonly" id="keyCode" name="keyCode" class="form-control" type="text">
                        </div>
                        <label class="col-sm-2 control-label is-required">value值：</label>
                        <div class="col-sm-4"><!--th:field="*{apiUrl}"-->
                            <input th:value="${d.valueCode}" id="valueCode" name="valueCode" class="form-control" type="text" required>
                        </div>
                    </div>

                </div>
            </div>

        </div>


        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭</button>
        </div>

    </form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    var prefix = ctx + "system/userModel";
    var a = "";
    var b = "";
    var c = "";
    //验证表单
    $("#form-userModel-edit").validate({
        onkeyup: false,
        onSubmit: true,
        focusCleanup: true,
        rules: {
            valueCode:{
                required: true
            }
        }
    });

    function submitHandler() {
        // $.operate.save(prefix + "/edit", $("#form-userModel-edit").serialize());

        var qwe = true;
        $('input[type=text]').each(function(){
            if ($(this).val()=='') {
                $.modal.alertError("不能为空");
                qwe = false;
                return;
            }
        })

        var sss = $('input[id=valueCode]');
        var asd = true;
        for(j = 0,len=sss.length-2; j <= len; j++) {
            for(i = j+1,len2=sss.length-1; i <= len2; i++) {
                if(sss[j].value==sss[i].value){
                    $.modal.alertError("value值不能相同！！！");
                    asd = false;
                }
            }
        }


        if ($.validate.form() && qwe && asd) {
            var valueCode1 = $("[name=valueCode]");
            $("[name=id]").each(function () {
                a += "," + $(this).val();
            });
            $("[name=keyCode]").each(function () {
                b += "," + $(this).val();
            });
            $("[name=valueCode]").each(function () {
                c += "," + $(this).val();
            });

            var formData = new FormData();
            formData.append("id", a);
            formData.append("keyCode", b);
            formData.append("valueCode", c);

            $.ajax({
                url: prefix + "/editData",
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (result) {
                    $.operate.successCallback(result);//成功后调用方法
                },
                error:function(){
                    a = "";
                    b = "";
                    c = "";
                }
            });
        }else{
            a = "";
            b = "";
            c = "";
        }



    }
</script>
</body>
</html>
